<template>
    <div>
        <div class="m_title">
            <img style="height: 60px;" src="../public/img/top_bg.png" alt="">
            <div style="position: absolute;line-height: 60px;color: white;font-weight: 900;font-size: 28px;letter-spacing: 2px;">
                焦作经开区智慧综合服务平台
            </div>
        </div>
        <div style="position: fixed;bottom: 20px;left: 50px;z-index: 999;pointer-events: none;">
            <img style="width: 160px;opacity: .3;"  src="../public/img/LOOG.png" alt="">
        </div>
        <div class="cleardialog">
            <el-dialog id="layerGis" style="width: 400px;" class="pathload" v-model="PathRoad" title="路径指令" draggable
                :close-on-click-modal="false">
                <div class="sjxian">
                    <i class="sij_xian_01"></i>
                    <i class="sij_xian_02"></i>
                    <i class="sij_xian_03"></i>
                    <i class="sij_xian_04"></i>
                    <i class="sij_xian_05"></i>
                    <i class="sij_xian_06"></i>
                    <i class="sij_xian_07"></i>
                    <i class="sij_xian_08"></i>
                </div>
                <div style="height: 100%;display: flex;align-items: center;">
                    <!-- <el-button @click="$mapjs.mapObj.f_pathRun()" style="position: relative;z-index: 
            999;">开始</el-button> -->
                    <el-button :icon="VideoPause" type="primary" @click="$mapjs.mapObj.f_pathPause()" style="position: relative;z-index: 
            999;">暂停</el-button>
                    <el-button :icon="VideoPlay" type="success" @click="$mapjs.mapObj.f_pathContinue()" style="position: relative;z-index: 
            999;">继续</el-button>
                    <el-button :icon="CircleClose" type="danger" @click="$mapjs.mapObj.f_pathcancel()" style="position: relative;z-index: 
            999;">取消</el-button>
                </div>
            </el-dialog>
        </div>
        <div class="cleardialog">
            <el-dialog id="layerGis" style="width: 400px;" class="command" v-model="TravalFlag" title="漫游指令" draggable
                :close-on-click-modal="false">
                <div class="sjxian">
                    <i class="sij_xian_01"></i>
                    <i class="sij_xian_02"></i>
                    <i class="sij_xian_03"></i>
                    <i class="sij_xian_04"></i>
                    <i class="sij_xian_05"></i>
                    <i class="sij_xian_06"></i>
                    <i class="sij_xian_07"></i>
                    <i class="sij_xian_08"></i>
                </div>
                <div>
                    <div style="display: flex; margin-bottom: 20px;">
                        <div style="width: 50%;">
                            <div style="display: flex;justify-content: center;margin-bottom: 8px;">
                                <div class="fbtn">W</div>
                            </div>
                            <div style="display: flex;justify-content: space-evenly;">
                                <div class="fbtn">A</div>
                                <div class="fbtn">S</div>
                                <div class="fbtn">D</div>
                            </div>
                        </div>
                        <div style="width: 50%;color: white;padding-left: 20px;font-size: 18px;">
                            <div>
                                W: 向前
                            </div>
                            <div>
                                S: 向后
                            </div>
                            <div>
                                A: 左转
                            </div>
                            <div>
                                D: 右转
                            </div>
                        </div>
                    </div>
                    <div style="display: flex; margin-bottom: 20px;">
                        <div style="width: 50%;">
                            <div style="display: flex;justify-content: center;margin-bottom: 8px;">
                                <div class="fbtn">I</div>
                            </div>
                            <div style="display: flex;justify-content: space-evenly;">
                                <div class="fbtn">J</div>
                                <div class="fbtn">K</div>
                                <div class="fbtn">l</div>
                            </div>
                        </div>
                        <div style="width: 50%;color: white;padding-left: 20px;font-size: 18px;">
                            <div>
                                I: 仰视
                            </div>
                            <div>
                                J: 俯视
                            </div>
                            <div>
                                K: 左倾斜
                            </div>
                            <div>
                                L: 右倾斜
                            </div>
                        </div>
                    </div>
                    <div style="display: flex; margin-bottom: 20px;">
                        <div style="width: 50%;">
                            <div style="display: flex;justify-content: center;margin-bottom: 8px;">
                                <div class="fbtn">↑</div>
                            </div>
                            <div style="display: flex;justify-content: space-evenly;">
                                <div class="fbtn">←</div>
                                <div class="fbtn">↓</div>
                                <div class="fbtn">→</div>
                            </div>
                        </div>
                        <div style="width: 50%;color: white;padding-left: 20px;font-size: 18px;">
                            <div>
                                ↑ : 升高
                            </div>
                            <div>
                                ←: 左平移
                            </div>
                            <div>
                                ↓ : 下降
                            </div>
                            <div>
                                →: 右平移
                            </div>
                        </div>
                    </div>
                </div>
            </el-dialog>
        </div>
        <!--tree弹框-->
        <div class="cleardialog">
            <el-dialog id="layerGis" class="areatree" v-model="fa" title="资源面板" draggable :close-on-click-modal="false">
                <div class="sjxian">
                    <i class="sij_xian_01"></i>
                    <i class="sij_xian_02"></i>
                    <i class="sij_xian_03"></i>
                    <i class="sij_xian_04"></i>
                    <i class="sij_xian_05"></i>
                    <i class="sij_xian_06"></i>
                    <i class="sij_xian_07"></i>
                    <i class="sij_xian_08"></i>
                </div>
                <el-tree :data="defind_tree" ref="treeRef" show-checkbox :check-strictly="true" node-key="id"
                    :props="m_defaultProps" @node-click="clickTree" @check-change="treeCheckedChange" default-expand-all
                    :default-checked-keys="m_defaultCheckedKeys">
                    <template #default="scope">
                        <div class="custom-node">
                            <span>{{ scope.node.label }}</span>
                        </div>
                    </template>
                </el-tree>
                <div class="wrap">

                </div>
            </el-dialog>
        </div>
        <!--地图工具-->
        <div class="toolsmain">
            <div class="clear"></div>
            <el-tooltip content="资源列表" placement="right">
                <img :src="layericon" class="toollabel" @click="fa = !fa" />
            </el-tooltip>

            <div class="clear"></div>
            <el-tooltip content="放大" placement="right">
                <img :src="amplify" class="toollabel" @click="ZoomIn()" />
            </el-tooltip>

            <div class="clear"></div>
            <el-tooltip content="缩小" placement="right">
                <img :src="reduce" class="toollabel" @click="Zoomout()" />
            </el-tooltip>

            <div class="clear"></div>
            <el-tooltip content="全图" placement="right">
                <!-- fullscreen() -->
                <img :src="qt" class="toollabel" @click="Fullscreen()" />
            </el-tooltip>

            <div class="clear"></div>
            <el-tooltip content="清除" placement="right">
                <img :src="qc" class="toollabel" @click="clearMap()" />
            </el-tooltip>

            <div class="clear"></div>
            <el-tooltip content="更多" placement="right">
                <img :src="gdico" class="toollabel" @click="isShow = !isShow" />
            </el-tooltip>
            <transition name="fade">
                <div v-show="isShow" class="gjl_gd">
                    <h3>工具栏</h3>
                    <span>
                        <i style="float: left ;">
                            <img title="测量距离" :src="yc_ico1" class="toollabel" @click="m_ranging()" />
                            <img title="测量面积" :src="yc_ico14" class="toollabel" @click="m_mesurearea()" />
                        </i>
                        <!-- <i>
                            <img title="搜索" :src="yc_ico2" class="toollabel" @click="store.changeSearchShow(true)" />
                        </i>
                        <i>
                            <img title="添加立体字" :src="yc_ico3" class="toollabel" @click="addTextFloat()" />
                        </i>
                        <i>
                            <img title="地图标注" width="36" :src="dt01" class="toollabel" @click="
                                $mapjs.mapGS.f_SetTool(2);" />
                        </i> -->
                        <i>
                            <img title="坐标查询" width="36" :src="dt02" class="toollabel" @click="
                                $mapjs.mapObj.f_SetTool(1);" />
                        </i>
                        <!-- <i>
                            <img title="添加方向线" width="36" :src="dt03" class="toollabel" @click="
                                $mapjs.mapGS.f_SetTool(3);" />
                        </i> -->
                        <!-- <i>
                            <img :src="yc_ico11" title="环视" class="toollabel" @click="$mapjs.mapGS.roundView()" />
                        </i> -->
                    </span>
                </div>
            </transition>
        </div>

        <!--搜索框-->
        <div class="searchcon">

            <div class="searchmain">
                <el-input v-model="search" style="width: 240px" placeholder="请输入搜索内容">
                    <template #append>
                        <el-button @click="f_search()" :icon="Search" />
                    </template>
                </el-input>
            </div>
            <div class="resultcon">
                <div class="resultmain" v-for="(item, index) in searchList" @click="flyToQY(item)">
                    <div class="dot"></div>
                    <div class="resultname">
                        {{ item.qiye_name }}
                    </div>
                </div>
            </div>
        </div>
        <!-- <div id="m_zbz"
            style="position: fixed;width: 128px; height:128px;background-image: url('/img/zbz.png');z-index: 2;right:60px;bottom:40px;pointer-events: none;">
        </div> -->
        <div class="cleardialog">
            <el-dialog id="layerGis" class="floattext" v-model="$store.floatshow" title="添加标注" draggable
                :close-on-click-modal="false">
                <div class="sjxian">
                    <i class="sij_xian_01"></i>
                    <i class="sij_xian_02"></i>
                    <i class="sij_xian_03"></i>
                    <i class="sij_xian_04"></i>
                    <i class="sij_xian_05"></i>
                    <i class="sij_xian_06"></i>
                    <i class="sij_xian_07"></i>
                    <i class="sij_xian_08"></i>
                </div>
                <div style="margin-top: 20px;">
                    <el-form :model="Floatform" label-width="auto" style="max-width: 600px">
                        <el-form-item label="标注内容">
                            <el-input v-model="Floatform.label" />
                        </el-form-item>
                        <el-form-item label="标注颜色">
                            <el-select v-model="Floatform.color" placeholder="请选择标注颜色">
                                <el-option v-for="item in labelColor" :label="item.name" :value="item.color" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div>
                    <el-button @click="sureadd()">确定</el-button>
                    <el-button v-show="$store.floatEdit" @click="delFloat()">删除</el-button>
                    <el-button @click="cancel()">取消</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script setup>
import * as Cesium from 'cesium';
import { onMounted, ref, watch, reactive } from 'vue';
import { mainStore } from "./store/index";
import { Search,VideoPause,VideoPlay,CircleClose } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from "element-plus";
import $api from "../src/api/api";
import layericon from "./assets/img/icobg.png";
import qc from "./assets/img/qc.png";
import qt from "./assets/img/qt.png"
import amplify from "./assets/img/ico01_01.png";
import reduce from "./assets/img/ico01_02.png";
import gdico from "./assets/img/gdico.png";
import yc_ico1 from "./assets/img/yc_ico1.png";
import yc_ico14 from "./assets/img/yc_ico14.png";
import yc_ico10 from "./assets/img/yc_ico10.png";
import yc_ico11 from "./assets/img/yc_ico11.png";
import yc_ico2 from "./assets/img/yc_ico2.png";
import yc_ico3 from "./assets/img/yc_ico3.png";
import yc_ico4 from "./assets/img/yc_ico4.png";
import dt01 from "./assets/img/dt01.png";
import dt02 from "./assets/img/dt02.png";
import dt03 from "./assets/img/dt03.png";
import $mapjs from "../src/mapjs/3Dmap";
const tiletype = ref('dfd');
function tileswitch() {
    if (tiletype.value == 'dfd') {
        $mapjs.switch3DTile(tiletype.value)
        tiletype.value = 'all'
    } else {
        $mapjs.switch3DTile(tiletype.value)
        tiletype.value = 'dfd'
    }
}
const $store = mainStore();
const layerGisShow = ref(true);
const fa = ref(true);
const isShow = ref(false);
const search = ref("");
const show3d = ref(true);
const local = ref(false);
const mdgt = ref(false);
const roamflag = ref(true);
const translate = ref({
    front: 0,
    rear: 0,
    left: 0,
    right: 0
});
function roam() {

    if (roamflag.value) {
        $mapjs.setroampos();
        window.addEventListener('keydown', handleKeydown);
    } else {
        window.removeEventListener('keydown', handleKeydown);
    }
    roamflag.value = !roamflag.value
}
function handleKeydown(event) {
    for (let Key in translate.value) {
        translate.value[Key] = 0;
    }
    switch (event.keyCode) {
        case 65: // A
            $mapjs.moveCamera('left')
            break;
        case 87: // W
            $mapjs.moveCamera('front')
            break;
        case 68: // D
            $mapjs.moveCamera('right')
            break;
        case 83: // S
            $mapjs.moveCamera('back')
            break;
        case 73://i
            $mapjs.moveCamera('picthUp')
            break;
        case 74://J
            $mapjs.moveCamera('rollRight')
            break;
        case 75://K
            $mapjs.moveCamera('picthDown')
            break;
        case 76://L
            $mapjs.moveCamera('rollLeft')
            break;
        case 38://↑
            $mapjs.moveCamera('moveUp')
            break;
        case 40://↓
            $mapjs.moveCamera('moveDown')
            break;
        case 37://←
            $mapjs.moveCamera('moveLeft')
            break;
        case 39://→
            $mapjs.moveCamera('moveRight')
            break;
        case 69://E
            $mapjs.moveCamera('translateBehind')
            break;
        case 81://Q
            $mapjs.moveCamera('translateFront')
            break;
        default:
            break;
    }
};

function f_model() {
    mdgt.value = !mdgt.value;
    $store.dgtmap = !$store.dgtmap;
    console.log(mdgt.value);
    localStorage.setItem('dgtmap', $store.dgtmap)
    $mapjs.model($store.dgtmap);
}
function switch3D() {
    if (show3d.value) {
        $mapjs.mapObj.removeTileLight();
    } else {
        $mapjs.mapObj.f_remove3Dtile();
    }
    // console.log(show3d.value);
}
function switchLocal() {
    if (local.value) {
        $mapjs.mapObj.f_set3Dmaptype(2)
    } else {
        $mapjs.mapObj.f_set3Dmaptype(1)
    }
}
const m_defaultProps = {
    children: "mapLayerList",
    label: "name",
};
const TravalFlag = ref(false);
const PathRoad = ref(false);
//
function treeCheckedChange(data, isChecked) {
    console.log(data, isChecked);
    if (data.id == 901) {
        if (isChecked) {
            $mapjs.f_Load3DMapData();
        } else {
            $mapjs.f_remove3Dtile();
        }
    } else if (data.id == 902) {
        if (isChecked) {
            $mapjs.addLightTile();
        } else {
            $mapjs.removeTileLight();
        }
    } else if (data.id == 997) {
        if (isChecked) {
            $mapjs.LightFly();
        } else {
            $mapjs.removeLightFly();
        }
    } else if (data.id == 998) {
        if (isChecked) {
            $mapjs.addLightTile(true);
        } else {
            $mapjs.addLightTile();
        }
    } else if (data.id == 905) {
        if (isChecked) {
            $mapjs.f_RoadLight();
        } else {
            $mapjs.removeRoadLight();
        }
    } else if (data.id == 906) {
        if (isChecked) {
            $mapjs.waterM();
        } else {
            $mapjs.removeWater();
        }
    } else if (data.id == 912) {
        $mapjs.qqwxshow(isChecked)
    } else if (data.id == 913) {
        $mapjs.jzwxshow(isChecked)

    } else if (data.id == 914) {
        $mapjs.dzmapshow(isChecked)

    } else if (data.id == 915) {
        $mapjs.asdzshow(isChecked)

    } else if (data.id == 1) {
        PathRoad.value = false;
        if (isChecked) {
            $mapjs.setroampos();
            TravalFlag.value = true;
            window.addEventListener('keydown', handleKeydown);
        } else {
            window.removeEventListener('keydown', handleKeydown);
            TravalFlag.value = false;
        }
    } else if (data.id == 2) {
        TravalFlag.value = false;
        window.removeEventListener('keydown', handleKeydown);
        if (isChecked) {
            $mapjs.mapObj.f_pathRun();
            PathRoad.value = true;
        } else {
            $mapjs.mapObj.f_pathcancel();
            PathRoad.value = false;
        }
    }else if (data.id == 3) {
        if (isChecked) {
            $mapjs.f_DrawDM();
        }else{
            $mapjs.f_clearDM();
        }
    }else if (data.id == 4) {
        if (isChecked) {
            $mapjs.f_ShowDanWei();
        }else{
            $mapjs.f_ClearDanWei();
        }
    }else if (data.id == 907) {
        if (isChecked) {
            $mapjs.f_LoadRoadName();
        } else {
            $mapjs.f_ClearRoadName();
        }
    }
}
function clickTree(data) {

}
let m_defaultCheckedKeys = ref([
    901,912,913
]);
let defind_tree = ref([
    {
        id: 911,
        name: '地图图层',
        disabled: true,
        sort: 911,
        mapLayerList: [
            {
                name: '全球卫星',
                id: 912,
                disable: false,
                sort: 912
            },
            {
                name: '焦作卫星',
                id: 913,
                disable: false,
                sort: 913
            },
            {
                name: '电子地图',
                id: 914,
                disable: false,
                sort: 914
            },
            {
                name: '暗色电子地图',
                id: 915,
                disable: false,
                sort: 915
            }
        ]
    },
    {
        id: 900,
        name: '模型',
        disabled: true,
        sort: 900,
        mapLayerList: [
            {
                id: 901,
                name: '实景3D模型',
                sort: 901,
            },
            {
                id: 902,
                name: '立体模型 ',
                sort: 902,
            }
        ]
    },
    {
        id: 904,
        name: '地图特效',
        disabled: true,
        sort: 904,
        mapLayerList: [
            {
                id: 997,
                name: '竖直飞线',
                disable: false,
                sort: 998
            },
            {
                id: 998,
                name: '模型泛光',
                disable: false,
                sort: 999
            },
            {
                id: 905,
                name: '道路流光',
                disable: false,
                sort: 905
            },
            {
                id: 906,
                name: '水面特效',
                disable: false,
                sort: 906
            },
            {
                id: 907,
                name: '立体字',
                disable: false,
                sort: 906
            },
            
        ]
    },
    {
        id: 1,
        name: '场景漫游',
        disabled: false,
    },
    {
        id: 2,
        name: '路径回放',
        disabled: false,
    },
    {
        id: 3,
        name: '加载乡镇',
        disabled: false,
    },
    {
        id: 4,
        name: '加载企业',
        disabled: false,
    },
]);
function ZoomIn() {
    $store.mapObj.mapObj.f_ZoomIn()
}
function Zoomout() {
    $store.mapObj.mapObj.f_ZoomOut()
}
function Fullscreen() {
    $store.mapObj.f_JZFullMap();
}
function clearMap() {
    ElMessage({ message: "已清除!" });
    $store.mapObj.f_ClearEntities();
    // $store.mapObj.remove3Dtile();
}
const ranging = ref(false);
function m_ranging() {
    ranging.value = !ranging.value;
    if (ranging.value) {
        ElMessage({
            type: "success",
            message: "左键点击开始测距,右键结束测量！",
        });
        $store.mapObj.measureLine();
    } else {
        ElMessage({
            type: "success",
            message: "测量结束,已清除测距!",
        });
        $store.mapObj.f_ClearEntities();
    }
}
const area = ref(false);
function m_mesurearea() {
    area.value = !area.value;
    if (area.value) {
        ElMessage({
            type: "success",
            message: "左键开始测量面积,右键结束测量！",
        });
        $store.mapObj.newmesure();
    } else {
        ElMessage({
            type: "success",
            message: "测量结束,已清除测量!",
        });
        $store.mapObj.f_ClearEntities();
    }
}
const Floatform = ref({
    startPoint: {},
    endPoint: {}
});
const labelColor = ref([
    {
        name: '红色',
        color: '#FF0101'
    },
    {
        name: '蓝色',
        color: '#0000FF'
    },
    {
        name: '黄色',
        color: '#FFFF00'
    },
    {
        name: '绿色',
        color: '#00FF00'
    },
    {
        color: '#ff00ff',
        name: '紫色',
    },
    {
        color: '#000000',
        name: '黑色',
    },
    {
        color: '#ffffff',
        name: '白色',
    },
])
function sureadd() {
    if (!$store.floatEdit) {
        if (Floatform.value.label == '' || !Floatform.value.label) {
            ElMessage({
                message: '请输入标注内容!',
                type: 'warning'
            })
        } else if (Floatform.value.color == '' || !Floatform.value.color) {
            ElMessage({
                message: '请选择标注颜色!',
                type: 'warning'
            })
        } else {
            Floatform.value.startPoint.x = $store.floatText[0][0]
            Floatform.value.startPoint.y = $store.floatText[0][1]
            Floatform.value.endPoint.x = $store.floatText[1][0]
            Floatform.value.endPoint.y = $store.floatText[1][1]
            $api.drawFloatText(Floatform.value).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        message: '添加成功!',
                        type: 'success'
                    })
                    $store.floatshow = false;
                    Floatform.value.label = '';
                    Floatform.value.color = '';
                    $store.floatText = []
                    $store.mapObj.f_ClearEntities('mfont');
                    $store.mapObj.mapObj.f_SetTool(null);
                    $store.mapObj.mapObj.clearTemp();
                    getFltTextList()
                }
            })
        }
    } else {
        $api.updateFloatText(Floatform.value).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '修改成功!',
                    type: 'success'
                })
                $store.floatshow = false;
                Floatform.value.label = '';
                Floatform.value.color = '';
                $store.floatText = []
                $store.mapObj.f_ClearEntities('mfont')
                getFltTextList()
            }
        })
    }

}
function cancel() {
    $store.floatshow = false;
    Floatform.value.label = '';
    Floatform.value.color = '';
    $store.mapObj.mapObj.f_SetTool(null);
    $store.mapObj.mapObj.clearTemp();
    $store.floatText = [];
}
function delFloat() {
    console.log(Floatform.value);
    ElMessageBox.confirm(
        '确定删除?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        $api.delFloatText(Floatform.value.id).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '删除成功!',
                    type: 'success'
                })
                $store.floatshow = false;
                Floatform.value.label = '';
                Floatform.value.color = '';

                $store.floatText = []
                $store.mapObj.f_ClearEntities('mfont')
                getFltTextList()
            }
        })
    })
}
function addTextFloat() {
    $store.floatEdit = false;
    $store.mapObj.mapObj.f_SetTool(4);
}
watch(() => $store.floatEditID, (nv, ov) => {
    if (nv) {
        getFloatByID(nv)
    }
})
function getFloatByID(id) {
    $api.getFloatText(id).then(res => {
        if (res.code == 200) {
            Floatform.value = res.data
        }
    })
    $store.floatEditID = null;
}
const FltTextList = ref([]);
function getFltTextList() {
    $api.getFloatTextList().then(res => {
        res.data.forEach((item, index) => {
            item.coordinates = []
            let coord = JSON.parse(item.coordinate)
            coord.forEach((ite, ind) => {
                item.coordinates = item.coordinates.concat(ite.x).concat(ite.y)

            })
            item.coordinates = item.coordinates.concat(item.coordinates[0], item.coordinates[1])
            // console.log(item,5699);
            $store.mapObj.f_Add3Dfont(item.label, item.coordinates, new Cesium.Color.fromCssColorString(item.color), item.id);
        })
        FltTextList.value = res.data;
    })
}
function getQyList() {
    $api.getQyList().then(res => {
        if (res.code == 200) {
            res.data.forEach((item, index) => {
                // console.log(item,'qy');

                let icon = '/img/3.png';
                if (item.name.length <= 6) {
                    icon = '/img/2.png';
                }
                let xy = [Number(item.lon), Number(item.lat)]
                $store.mapObj.f_AddDimension(item.name, item.gid, 'qy', xy, 11, '#fff', 100000, icon, 300, 24, false)
            })
        }
    })
}
const searchList = ref([]);
function f_search() {
    let obj = {};
    if (search.value == '') {
        searchList.value = []
    } else {
        obj.qiye_name = search.value;
        $api.searchQy(obj).then(res => {
            if (res.code == 200) {
                searchList.value = res.data.result;
            }
        })
    }

}
function flyToQY(e) {
    $store.mapObj.mapObj.f_setView(Number(e.lon), Number(e.lat));
}
const stepspeed = ref(1.5)
const viewModel = ref({
    show: true,
    glowOnly: false,
    contrast: 50,
    brightness: -0.5,
    delta: 2,
    sigma: 3.78,
    stepSize: 5.0,
});
function setlight(e) {
    let obj = { ...viewModel.value };
    $store.mapObj.mapObj.f_SetLight(obj);
}
function setStep(e) {
    $mapjs.f_setStep(e);
    console.log(e);
}
const formatTooltip = (val) => {

    return val / 100
}
onMounted(() => {
    // getQyList();
    // getFltTextList();
});

</script>
<style lang="less">
.fade-enter-active,
.fade-leave-active {
    transition: opacity 1s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.cleardialog>div {
    width: 0;
}

.floattext {
    width: 400px !important;
    height: 250px !important;
    bottom: 50px !important;
    left: 100px;
}

.areatree {
    top: 70px;
    left: 20px;
}

.command {
    top: 90px;
    right: 20px;
}
.pathload {
    top: 90px;
    right: 20px;
    height: 110px !important;
    width: 302px !important;
}
#layerGis {
    position: fixed;
    z-index: 2;
    width: 260px;
    height: 45%;
    pointer-events: auto;
    border: 1px solid #006699;
    background-color: rgba(3, 36, 56, 0.6);
    transition: left 1s ease-out;
    margin: 0;

    ::-webkit-scrollbar {
        background-color: #031f30;
        width: 5px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(1, 80, 143, 0.6);
        border-radius: 500px;
    }

    .cleardialog>div {
        width: 0;
    }

    .el-dialog__title {
        display: block;
        color: #0082f1 !important;
        // background: url(/img/yk_ico1.png) 0 3px no-repeat;
        // padding-left: 26px;
        font-size: 16px;
    }

    .el-dialog__headerbtn {
        top: -2px;
    }



    .el-dialog__header {
        box-sizing: border-box;
        width: 100%;
        padding: 10px 20px;
        background-color: #0066997c;

        .el-dialog__title {
            color: #fff;
            font-size: 16px;
        }

        .el-icon svg {
            color: #fff;
        }
    }


    .el-dialog__body {
        padding-top: 0;
        padding-bottom: 0;
        height: calc(100% - 60px);
        // background-color: rgba(3, 36, 56, 0.6);
        overflow-y: auto;
    }

    .el-tree-node:focus>.el-tree-node__content {
        background-color: #0066998a;
    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }

    .el-tree>.el-tree-node:after {
        border-top: none;
    }

    .el-tree-node {
        position: relative;
    }

    .el-tree-node__expand-icon.is-leaf {
        display: none;
    }

    .el-tree-node__children {
        padding-left: 16px;
    }

    .el-tree-node :last-child:before {
        height: 38px;
    }

    .el-tree>.el-tree-node:before {
        border-left: none;
    }

    .el-tree>.el-tree-node:after {
        border-top: none;
    }

    .el-tree-node:before {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .el-tree-node:after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .el-tree-node:before {
        border-left: 1px dotted #fff;
        bottom: 0px;
        height: 100%;
        top: -26px;
        width: 1px;
    }

    .el-tree-node:after {
        border-top: 1px dotted #fff;
        height: 20px;
        top: 12px;
        width: 24px;
    }

    .el-slider__button {
        width: 15px;
        height: 15px;
    }

    .el-checkbox.is-disabled {
        display: none;
    }

    .el-tree {
        background-color: transparent;
    }

    .el-tree-node__content {
        color: #fff;
    }

    .el-tree-node__content:hover {
        background-color: #0066998a;
    }

    .sjxian i {
        display: block;
        background: #fff;
        position: absolute;
    }

    .sjxian {
        .sij_xian_01 {
            top: 0;
            left: 0;
            width: 11px;
            height: 1px;
        }

        .sij_xian_02 {
            top: 0;
            left: 0;
            width: 1px;
            height: 11px;
        }

        .sij_xian_03 {
            bottom: 0;
            left: 0;
            width: 11px;
            height: 1px;
        }

        .sij_xian_04 {
            bottom: 0;
            left: 0;
            width: 1px;
            height: 11px;
        }

        .sij_xian_05 {
            top: 0;
            right: 0;
            width: 11px;
            height: 1px;
        }

        .sij_xian_06 {
            top: 0;
            right: 0;
            width: 1px;
            height: 11px;
        }

        .sij_xian_07 {
            bottom: 0;
            right: 0;
            width: 11px;
            height: 1px;
        }

        .sij_xian_08 {
            bottom: 0;
            right: 0;
            width: 1px;
            height: 11px;
        }
    }
}

.searchmain,
.geominput {
    .el-input {
        width: 260px !important;
    }

    .el-input-group__append {
        background-color: #0066997c !important;
    }

    .el-input__wrapper {
        background-color: #0066997c !important;

    }

    .el-input__inner {
        color: white !important;
    }
}
</style>
<style scoped lang="less">
.gjl_gd {
    position: absolute;
    left: 50px;
    bottom: 5px;
    background: rgba(0, 60, 95, 0.8);
    width: 180px;
    border-radius: 3px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    animation: slide-in 0.5s ease-out;
}

.gjl_gd h3 {
    font-weight: normal;
    font-size: 16px;
    color: #92bacd;
}

.searchcon {
    width: 300px;
    max-height: 400px;
    position: fixed;
    top: 70px;
    right: 20px;
    background-color: #0066997c;
    color: white;

    .searchmain {
        margin: 10px auto;
        text-align: center;
    }

    .resultcon {
        color: white;
        overflow-y: scroll;
        padding: 0 20px;
        max-height: 335px;

        ::-webkit-scrollbar {
            background-color: #031f30;
            width: 5px;
        }

        ::-webkit-scrollbar-thumb {
            background-color: rgba(1, 80, 143, 0.6);
            border-radius: 500px;
        }

        .resultmain {

            line-height: 30px;
            display: flex;
            align-items: center;
            cursor: pointer;
            border-bottom: .5px solid #386B96;

            .resultname {

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .dot {
                width: 10px;
                height: 10px;
                background-color: white;
                border-radius: 20px;
                margin-right: 10px;
            }

        }
    }
}

.cleardialog>div {
    width: 0;
}

.toolsmain {
    display: block;
    align-items: center;
    transition: left 1s ease-out;
}

.toolsmain {
    z-index: 2;
    position: fixed;
    bottom: 20px;
    transition: left 1s ease-out;
}

.toolsmain>div {
    margin-right: 20px;
}

.toollabel {
    font-size: 20px;
    margin: 5px 0 0 5px;
    color: #999;
    border-radius: 5px;
    cursor: pointer;
}

.fbtn {
    width: 40px;
    line-height: 40px;
    border-radius: 5px;
    background-color: #031f30;
    color: white;
    border: 1px solid #fff;
    text-align: center;
}
.m_title{
    width: 100%;
    position: fixed;
    // background-color: white;
    background: linear-gradient(to right, rgba(27,201,145,0) 0%, rgba(13,64,94,.8) 50%, rgba(27,201,145,0) 100%);
    // line-height: 70px;
    z-index: 999;
    top: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
</style>